<template>
  <div
    class="swiper-wraper"
    @touchstart="startSwipe"
    @touchmove="onSwipe"
    @touchend="endSwipe"
  >
    <div
      class="card"
      :style="{
        transform: showDeleteRef
          ? `translateX(-${eventWindthComputed}rem)`
          : 'translateX(0px)',
        borderRadius: showDeleteRef ? '0px' : '',
      }"
    >
      <slot :row="{ translateX: eventWindthComputed }"></slot>
    </div>
    <div
      class="event"
      :style="{
        transform: showDeleteRef
          ? `translateX(-${eventWindthComputed}rem)`
          : 'translateX(0px)',
        width: `${eventWindthComputed}rem`,
      }"
    >
      <div
        class="evt edit"
        v-if="props.showEdit"
        v-ripple
        @click="
          () => {
            emit('edit');
            showDeleteRef = false;
          }
        "
      >
        编辑
      </div>
      <div
        class="evt del"
        v-ripple
        @click="
          () => {
            emit('delete');
            showDeleteRef = false;
          }
        "
      >
        删除
      </div>
    </div>
  </div>
</template>

<script setup name="MenoIndex">
import { ref, onMounted, defineProps, defineEmits, computed ,watch} from 'vue';

const emit = defineEmits(['delete', 'edit','update:modelValue']);

const props = defineProps({
  showDetele: {
    type: Boolean,
    default: true,
  },
  showEdit: {
    type: Boolean,
    default: false,
  },
  modelValue: {
    type:Number
  },
  index:{
    type:Number
  }
});

const eventW = 4;
const eventWindthComputed = computed(() => {
  let w = 0;
  if (props.showDetele) {
    w += eventW;
  }
  if (props.showEdit) {
    w += eventW;
  }
  return w;
});

const showDeleteRef = ref(false);

let startX, endX;
const startSwipe = (e) => {
  startX = e.touches[0].clientX;
};

const onSwipe = (e) => {
  endX = e.touches[0].clientX;
  //   console.log(startX - endX);
  if (startX - endX > 50) {
    showDeleteRef.value = true;
    emit('update:modelValue',props.index)

  } else {
    if (startX - endX < 0) {
      showDeleteRef.value = false;
    }
  }
};
const endSwipe = () => {}

watch((props), newProps => {
  if (newProps.index !== newProps.modelValue) {
    showDeleteRef.value = false;
  }
})
</script>
<style scoped lang="less">
.swiper-wraper {
  border-radius: 0.6rem;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: calc(100vw - 0.98rem) 8rem;
  -webkit-transform: rotate(0deg);
  box-sizing: border-box;
  .card {
    height: 100%;
    width: calc(100% + .1rem);
    overflow: hidden;
    transition: 0.2s;
    border-radius: 0.6rem;
  }
  .event {
    height: 100%;
    transition: 0.2s;
    display: flex;
    .evt {
      width: 4rem;
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 0.9rem;
    }
    .edit {
      background-color: orange;
    }
    .del {
      background-color: red;
    }
  }
}
</style>
